<template>
  <div class="footer">
    <!-- 上面板块 -->
    <div class="footer-top">
      <div class="wrap">
        <div class="title">
          <img src="../assets/img/score.png" alt="" />
          <span>积分攻略</span>
        </div>

        <ul class="strategy">
          <li>
            <img src="../assets/img/integral-01.9386d4bf.png" alt="" />
            <p>签到得积分</p>
            <span>去签到</span>
          </li>
          <li>
            <img src="../assets/img/integral-02.150d92a1.png" alt="" />
            <p>购课得积分</p>
            <span>去购课</span>
          </li>
          <li>
            <img src="../assets/img/integral-03.9870f3f1.png" alt="" />
            <p>推荐得积分</p>
            <span>去推荐</span>
          </li>
          <li>
            <img src="../assets/img/integral-04.afadcbdf.png" alt="" />
            <p>拼团得积分</p>
            <span>去拼团</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- 下面的板块 -->
    <div class="footer-down">
      <div class="wrap footer-down-wrap">
        <div class="left">
          <h1>
            <img src="../assets/img/slogan.7730f7f2.png" alt="" />
          </h1>
          <p>
            叩丁狼是一家专注于培养高级IT技术人才，为学员提供定制化IT职业规划方案及意见咨询服务的教育科技公司，为您提供海量优质课程，以及创新的线上线下学习体验，帮助您获得全新的个人发展和能力提升。
          </p>
        </div>
        <div class="center">
          <span>微信公众号</span>| <span>新浪微博</span>|
          <span class="current">在线客服</span>
        </div>
        <div class="right">
          <p>全国免费咨询热线：</p>
          <h2>020-85628002</h2>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.footer {
  .footer-top {
    background-color: #ffffff;
    height: 303px;
    .title {
      padding-top: 20px;
      box-sizing: border-box;
      img {
        width: 41px;
        height: 38px;
        vertical-align: middle;
      }
      span {
        width: 119px;
        height: 29px;
        // line-height: 29px;
        font-size: 30px;
        font-family: SourceHanSansSC;
        font-weight: bold;
        color: #242b39;
        line-height: 23px;
        padding-left: 10px;
      }
    }

    .strategy {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding-top: 30px;
      box-sizing: border-box;
      li {
        cursor: pointer;
        width: 285px;
        height: 168px;
        text-align: center;
        position: relative;
        color: #ffffff;
        overflow: hidden;

        img {
          width: 285px;
          height: 168px;
          &:hover {
            transform: scale(1.1);
            transition: 0.5s;
          }
        }
        p {
          position: absolute;
          top: 43px;
          left: 20px;
          width: 160px;
          height: 29px;
          font-size: 30px;
          font-family: SourceHanSansSC;
          font-weight: bold;

          line-height: 23px;
        }
        span {
          position: absolute;
          top: 83px;
          left: 20px;
          width: 96px;
          height: 27px;
          line-height: 27px;
          border: 1px solid #ffffff;
        }
      }
    }
  }

  .footer-down {
    height: 240px;
    background: #242b39;
    .footer-down-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 50px;
      box-sizing: border-box;
      .left {
        width: 426px;
        p {
          padding-top: 27px;
          width: 426px;
          height: 55px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #7d879a;
          line-height: 20px;
        }
      }
      .center {
        width: 293px;
        height: 19px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #7d879a;
        span {
          padding: 0 10px;
          &.current {
            color: rgb(243, 244, 244);
          }
        }
      }
      .right {
        p {
          width: 130px;
          height: 14px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #7d879a;
        }
        h2 {
          padding-top: 10px;
          width: 220px;
          height: 22px;
          font-size: 28px;
          font-family: SourceHanSansSC;
          font-weight: bold;
          color: #ffffff;
        }
      }
    }
  }
}
</style>